$.extend({
    calender(e){
        const myChart = echarts.init(e, null);
        myChart.showLoading()

        $.get('/result/get/calendar', function (result) {
            const date = new Date();
            const year = date.getFullYear();
            myChart.hideLoading()
            const data = result.payload;
            const multiple = 5;   // 数据点大小和数据数的倍数关系
            let option = {
                backgroundColor: '#404a59',
                title: {
                    top: 30,
                    text: year + '年提交成果分布情况',
                    subtext: '测试数据',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                toolbox: {
                    feature: {
                        saveAsImage: {
                            iconStyle: {
                                borderColor: '#fff'
                            },
                            emphasis: {
                                iconStyle: {
                                    borderColor: "#fff",
                                    textFill: '#fff'
                                }
                            }
                        },
                        restore: {
                            iconStyle: {
                                borderColor: '#fff'
                            },
                            emphasis: {
                                iconStyle: {
                                    borderColor: "#fff",
                                    textFill: '#fff'
                                }
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '30',
                    left: '100',
                    data: ['次数', 'Top 12'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                calendar: [{
                    top: 100,
                    left: 'center',
                    range: [year + '-01-01', year + '-06-30'],
                    dayLabel: {
                        firstDay: 1 // 从周一开始
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#000',
                            width: 4,
                            type: 'solid'
                        }
                    },
                    yearLabel: {
                        formatter: '{start}  1st',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    itemStyle: {
                        color: '#323c48',
                        borderWidth: 1,
                        borderColor: '#111'
                    }
                }, {
                    top: 340,
                    left: 'center',
                    range: [year + '-07-01', year + '-12-31'],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#000',
                            width: 4,
                            type: 'solid'
                        }
                    },
                    dayLabel: {
                        firstDay: 1 // 从周一开始
                    },
                    yearLabel: {
                        formatter: '{start}  2nd',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    itemStyle: {
                        color: '#323c48',
                        borderWidth: 1,
                        borderColor: '#111'
                    }
                }],
                series: [
                    {
                        name: '次数',
                        type: 'scatter',
                        coordinateSystem: 'calendar',
                        data: data,
                        symbolSize: function (val) {
                            return val[1] * multiple;
                        },
                        itemStyle: {
                            color: '#ddb926'
                        }
                    },
                    {
                        name: '次数',
                        type: 'scatter',
                        coordinateSystem: 'calendar',
                        calendarIndex: 1,
                        data: data,
                        symbolSize: function (val) {
                            return val[1] * multiple;
                        },
                        itemStyle: {
                            color: '#ddb926'
                        }
                    },
                    {
                        name: 'Top 12',
                        type: 'effectScatter',
                        coordinateSystem: 'calendar',
                        calendarIndex: 1,
                        data: data.sort(function (a, b) {
                            return b[1] - a[1];
                        }).slice(0, 12),
                        symbolSize: function (val) {
                            return val[1] * multiple;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        itemStyle: {
                            color: '#f4e925',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        },
                        zlevel: 1
                    },
                    {
                        name: 'Top 12',
                        type: 'effectScatter',
                        coordinateSystem: 'calendar',
                        data: data.sort(function (a, b) {
                            return b[1] - a[1];
                        }).slice(0, 12),
                        symbolSize: function (val) {
                            return val[1] * multiple;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        itemStyle: {
                            color: '#f4e925',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        },
                        zlevel: 1
                    }
                ]
            };
            myChart.setOption(option)
        })
    }
})